<template>
  <view class="index">
    <view v-show="tabberPageLoadFlag[0] && carouseList.length > 0" :style="{display: currentIndex === 0 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Home ref="Home" :carouseList="carouseList" :blogSelectList="blogSelectList"></Home>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Type v-if="tabberPageLoadFlag[1]" ref="Type" :tab="currentIndex"></Type>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
      <scroll-view  class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Board v-if="tabberPageLoadFlag[2]" ref="Board" :tab="currentIndex"></Board>
      </scroll-view>
    </view>
		<view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
		  <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
		    <Statistics v-if="tabberPageLoadFlag[3]" ref="Statistics" :tab="currentIndex"></Statistics>
		  </scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
		  <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
		    <My v-if="tabberPageLoadFlag[4]" ref="My" :tab="currentIndex"></My>
		  </scroll-view>
		</view>
    
    
    <tn-tabbar
      v-model="currentIndex"
      :list="tabbarList"
      activeIconColor="tn-main-gradient-purple"
			activeColor="#892FE8"
			inactiveColor=""
      :animation="true"
      :safeAreaInsetBottom="true"
      @change="switchTabbar"
    ></tn-tabbar>
  </view>
</template>

<script>
  import Home from '../tabbar/home/index.vue'
  import Type from '../tabbar/type/index.vue'
  import Board from '../tabbar/board/index.vue'
  import My from '../tabbar/my/index.vue'
  import Statistics from '../tabbar/statistics/index.vue'
  export default {
    components: {
      Home,
      Type,
      Board,
      My,
			Statistics
    },
    data() {
      return {
        // 底部tabbar菜单数据
        tabbarList: [
          {
            title: '首页',
            activeIcon: 'home-fill',
            inactiveIcon: 'home'
          },
          {
            title: '分类',
            activeIcon: 'menu-alone-fill',
            inactiveIcon: 'menu-alone'
          },
          {
            title: '留言板',
            activeIcon: 'comment-fill',
            inactiveIcon: 'comment',
						activeIconColor: '#FFFFFF',
						inactiveIconColor: '#FFFFFF',
            out: true
          },
          {
            title: '统计',
            activeIcon: 'data-fill',
            inactiveIcon: 'data',
          },
          {
            title: '我的',
            activeIcon: 'my-circle-fill',
            inactiveIcon: 'my-circle'
          }
        ],
        // tabbar当前被选中的序号
        currentIndex: 0,
        // 自定义底栏对应页面的加载情况
        tabberPageLoadFlag: [],
				//首页轮播图
				carouseList:[],
				//首页精选博文
				blogSelectList:[],
      }
    },
    onLoad(options) {
			this.getCarousel()
      const index = Number(options.index || 4)
      // 根据底部tabbar菜单列表设置对应页面的加载情况
      this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
        return index === tabbar_index
      })
      this.switchTabbar(index)
    },
    methods: {
      // 切换导航
      switchTabbar(index) {
        this._switchTabbarPage(index)
      },
      
      
      // 导航页面滚动到底部
      tabbarPageScrollLower(e) {
				// console.log(12)
      },
      
      // 切换导航页面
      _switchTabbarPage(index) {
        const selectPageFlag = this.tabberPageLoadFlag[index]
        if (selectPageFlag === undefined) {
          return
        }
        if (selectPageFlag === false) {
          this.tabberPageLoadFlag[index] = true
        }
        this.currentIndex = index
      },
			//获取轮播图
			getCarousel() {
				uni.showLoading({
					title: '加载中'
				});
				this.$api.getCarousel().then(res => {
					this.carouseList = res.data.map(i => {
						return {
							image: i.img, title: i.name,herf:i.href
						}
					})
					this.getSelectBlog()
				})
			},
			//获取精选博文
			getSelectBlog(){
				this.$api.getSelectBlog().then(res => {
					this.blogSelectList = res.data
					uni.hideLoading();
				})
			}
    }
  }
</script>

<style lang="scss" scoped>
  
  .index {
    overflow: hidden;
    height: 100%;
  }
  
  .custom-tabbar-page {
    height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
  }

</style>
